<!--  -->
<template>
  <div class="clearfix" id="login_wrap">
    <h2 class="title">登录页</h2>
    <div id="login">
      <div class="Login--account">
        <span>账号：</span>
        <input
          type="text"
          name="account"
          placeholder="随便输"
          v-model.trim="account"
        />
      </div>
      <div class="Login--password">
        <span>密码：</span>
        <input
          type="password"
          placeholder="随便输"
          name="password"
          v-model.trim="password"
          @keyup.enter="login"
        />
      </div>
      <p class="login--btn">
        <button id="loginBtn" @click="login">登录</button>
      </p>
    </div>
  </div>
</template>



<script>
import { login } from "../../api";

export default {
  components: {},
  data() {
    return {
      account: "",
      password: "",
    };
  },
  
  computed: {},
  watch: {},
  methods: {
    // 登录获取token
    async login() {
      //网络请求,获取token
      let data = await login(this.account);
      var token = data.token;
      // vuex中stoer与本地储存token
      this.$store.commit("LOGIN_IN", token);
      // token储存之后将页面跳转到首页
      this.$router.replace("/")
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='less' scoped>
</style>